import { Row, Col, Avatar, Button, Tag, List } from 'antd';
import { useState, useEffect } from 'react';
import { FormOutlined, CodeOutlined } from '@ant-design/icons';
import AllArticleList from './Mine/AllArticleList';
// import { UserOutlined } from '@ant-design/icons';
import HeatMap from '../../components/Home/HeatMap';
import LoginStore from '../../store/Login/index';
import { GetArticleSeriesListByUserId } from '../../api/Home/index';
import ArticleSeriesList from '../../components/Home/Mine/ArticleSeriesList';
import LatestArticles from './Mine/LatestArticles';
import ThumbUpsList from './Mine/ThumbUpsList';
import { useNavigate } from 'react-router-dom';


const Mine = () => {
    const [bottomTagStatus, setBottomTagStatus] = useState(1);//1.最近发布2.全部文章3.文章系列4.点赞文章

    const navigate=useNavigate();


    const [Articles, setArticles] = useState([]);//底部文章列表

    const { userInfo } = LoginStore();

    useEffect(() => {
        GetArticleSeriesListByUserId(userInfo.id).then(({ data }) => {
            setArticles(data.data);
        })
    }, []);
    return (
        <>
            {
                /**
                 * 头部信息
                 * */
            }
            <div style={{ paddingBottom: '25px', borderBottom: '2px solid gray' }}>
                <Row>
                    <Col span={12}>
                        <Row>
                            <Col>
                                <Avatar shape="square" size={64} src={userInfo.avatar} />
                            </Col>
                            <Col style={{ textAlign: 'left', marginLeft: '15px' }}>
                                <h1>{userInfo.username}</h1>
                                <Row style={{ marginTop: '15px' }}>
                                    <Col>{userInfo.accessCount}总访问量</Col>
                                    <Col style={{ marginLeft: '15px' }}>{userInfo.articleCount}文章</Col>
                                    <Col style={{ marginLeft: '15px' }}>{userInfo.thumbsUpCount}点赞</Col>
                                </Row>
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12} style={{ display: 'flex', justifyContent: 'right', alignItems: 'center' }}>
                        <Button type="primary" style={{ height: '40px' }} onClick={() => navigate('/editor')}>
                            <FormOutlined />
                            编辑资料
                        </Button>
                    </Col>
                </Row>
            </div>
            <div style={{ marginTop: '20px' }}>
                <div style={{ textAlign: 'left', margin: '0px', border: '1px solid gray', padding: '10px', borderRadius: '8px' }}>
                    <div>
                        <h1 style={{ fontSize: '20px', fontWeight: 'bold' }}>个人简介</h1>

                        <p style={{ fontSize: '15px', color: 'gray', marginTop: '15px' }}>{userInfo.introduce}</p>
                    </div>
                    <Row style={{ marginTop: '60px' }}>
                        <CodeOutlined />
                        <Tag style={{ marginLeft: '15px' }} color="magenta" onClose={() => {
                            console.log('close');
                        }}>
                            Python
                        </Tag>
                        <Tag color="magenta" onClose={() => {
                            console.log('close');
                        }}>
                            Next.js
                        </Tag>
                        <Tag color="magenta" onClose={() => {
                            console.log('close');
                        }}>
                            HarmonyOsNext
                        </Tag>
                        <Tag color="magenta" onClose={() => {
                            console.log('close');
                        }}>
                            React-Native
                        </Tag>
                    </Row>
                </div>
                {/**热力图 */}
                <div style={{ marginTop: '20px', textAlign: 'center' }}>
                    <HeatMap />
                </div>
                {/**Tag栏 */}
                <Row>
                    <Col span={6}
                        style={{
                            color: bottomTagStatus === 1 ? 'blue' : "",
                            borderBottom: `${bottomTagStatus === 1 ? '2px solid blue' : '0px solid blue'}`,
                            padding: '5px'
                        }}
                        onClick={() => { setBottomTagStatus(1) }}
                    >
                        <p>最近发布</p>
                    </Col>
                    <Col span={6}
                        style={{
                            color: bottomTagStatus === 2 ? 'blue' : "",
                            borderBottom: `${bottomTagStatus === 2 ? '2px solid blue' : '0px solid blue'}`,
                            padding: '5px'
                        }}
                        onClick={() => { setBottomTagStatus(2) }}
                    >
                        <p>全部文章</p>
                    </Col>
                    <Col span={6}
                        style={{
                            color: bottomTagStatus === 3 ? 'blue' : "",
                            borderBottom: `${bottomTagStatus === 3 ? '2px solid blue' : '0px solid blue'}`,
                            padding: '5px'
                        }}
                        onClick={() => { setBottomTagStatus(3) }}
                    >
                        <p>文章系列</p>
                    </Col>
                    <Col span={6}
                        style={{
                            color: bottomTagStatus === 4 ? 'blue' : "",
                            borderBottom: `${bottomTagStatus === 4 ? '2px solid blue' : '0px solid blue'}`,
                            padding: '5px'
                        }}
                        onClick={() => { setBottomTagStatus(4) }}
                    >
                        <p>点赞文章</p>
                    </Col>
                </Row>

                {/**文章列表 */}
                <LatestArticles status={bottomTagStatus === 1}/>
                <AllArticleList status={bottomTagStatus === 2} />
                <ArticleSeriesList status={bottomTagStatus === 3} Articles={Articles} />
                <ThumbUpsList status={bottomTagStatus === 4} />
            </div>
        </>
    )
}

export default Mine;